@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.DropdownsDemo
@model DropDownDemoDemoModel

<abp-component-demo-section title="Single button" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown>
        <abp-dropdown-button text="Dropdown button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown>
        <abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown>
        <abp-dropdown-button button-type="Danger" text="Dropdown button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>

<abp-component-demo-section title="Split button" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown>
        <abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown>
        <abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown>
        <abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown>
        <abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown>
        <abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>


<abp-component-demo-section title="Directions" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown direction="Up">
        <abp-dropdown-button button-type="Secondary" text="Dropup" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown direction="Right">
        <abp-dropdown-button button-type="Secondary" text="dropright" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
    <abp-dropdown direction="Right">
        <abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" />
        <abp-dropdown-menu>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item href="#">Another action</abp-dropdown-item>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>

<abp-component-demo-section title="Menu Items" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown>
        <abp-dropdown-button button-type="Secondary" text="Dropdown" />
        <abp-dropdown-menu>
            <abp-dropdown-header>Dropdown Header</abp-dropdown-header>
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
            <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
            <abp-dropdown-divider />
            <abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
            <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>

<abp-component-demo-section title="Menu alignment" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown>
        <abp-dropdown-button button-type="Secondary" text="Right-aligned" />
        <abp-dropdown-menu align="Right">
            <abp-dropdown-item href="#">Action</abp-dropdown-item>
            <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
            <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>

<abp-component-demo-section title="Custom Content" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown>
        <abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" />
        <abp-dropdown-menu class="p-4" style="max-width: 200px;">
            <p>
                Some example text that's free-flowing within the dropdown menu.
            </p>
            <p class="mb-0">
                And this is more example text.
            </p>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>

<div class="row">
    <div class="col-md-12">
        <h3>The form model is:</h3>
        <hr />
        <textarea style="width:100%;height: 320px" disabled>
    public class LoginDto
    {
        [Required]
        [EmailAddress]
        public string EmailAddress { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        public bool RememberMe { get; set; }
    }
        </textarea>
    </div>
</div>

<abp-component-demo-section title="With Form" view-path="@DropdownsDemoViewComponent.ViewPath">
    <abp-dropdown>
        <abp-dropdown-button button-type="Secondary" text="Dropdown With Form" />
        <abp-dropdown-menu>
            <form class="px-4 py-3">
                <abp-input asp-for="EmailAddress"></abp-input>
                <abp-input asp-for="Password"></abp-input>
                <abp-input asp-for="RememberMe"></abp-input>
                <abp-button button-type="Primary" text="Sign In" type="submit" />
            </form>
            <abp-dropdown-divider></abp-dropdown-divider>
            <abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
            <abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
        </abp-dropdown-menu>
    </abp-dropdown>
</abp-component-demo-section>
